{% macro list(blogList, isCanReply) %}

{% for item in blogList %}
<div class="blog-item">
  <div class="user-info">
    <img src="{{item.user.avatar}}" alt="" class="user-avatar" width="50" height="50" style=" border-radius: 50%; ">

  </div>
  <div class="blog-info">
    <div class="blog-content">
      <div>
        <a href="/profile/{{item.user.userName}}">
          <span class="username">{{item.user.nickName}}：</span>
        </a>
        <span class="text">{{item.formatContent | safe }}</span>
      </div>
      <!-- 图片有时显示 -->
      {% if item.image %}
      <a href="{{item.image}}" target="_blank">
        <img src="{{item.image}}" alt="" width="150" class="blog-image">
      </a>
      {% endif %}
    </div>
    <div class="create-time">
      <span>{{item.createdAt}}</span>

      {% if isCanReply %}
      <!-- 添加回复功能 -->
      <a href="#" class="reply" data-nick-name="{{item.user.nickName}}" data-user-name="{{item.user.userName}}"
        data-content="{{item.content}}">
        <svg class="bi" width="20" height="20" fill="currentColor">
          <use xlink:href="/images/bootstrap-icons.svg#reply-all-fill" />
        </svg>
        回复
      </a>
      {% endif %}
    </div>
  </div>
</div>
<hr>
{% endfor %}

<script>
  // 回复功能
  // on(event,selector,fn) 事件委托
  $(".col-lg-8").on("click", ".reply", function (e) {
    // 阻止默认行为
    e.preventDefault();
    const nickName = $(this).attr('data-nick-name');
    const userName = $(this).attr('data-user-name');
    const content = $(this).attr('data-content');
    //   // @张三 - zhangsan xxxx
    const $replyStr = `// @${nickName} - ${userName} ${content}`;
    $("#blog-content").val($replyStr);
    // 获取焦点
    // $("#blog-content")[0] 原生 dom 对象
    $("#blog-content")[0].focus();
    $("#blog-content")[0].setSelectionRange(0, 0);
  })

  // $(".reply").click()

</script>

{% endmacro %}